<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成表格</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }
        
        thead {
            background-color: #0099cc;
            color: white;
        }
        
        tbody {
            background-color: #f0f0f0;
            color: #404060;
            font-size: 14px;
        }
        
        td,
        th {
            height: 40px;
            border: 1px solid #d0d0d0;
        }
        
        th {
            padding: 0px 10px;
        }
        
        td {
            padding: 0px 10px;
        }
    </style>
</head>

<body>
    <button>获取数据</button>
    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>地址</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>传智播客</td>
                <td>http://www.itcast.cn</td>
                <td>IT最强培训机构</td>
            </tr>
            <tr>
                <td>黑马程序员</td>
                <td>http://www.itcast.com</td>
                <td>大学生IT培训机构</td>
            </tr>
            <tr>
                <td>传智前端学院</td>
                <td>http://web.itcast.cn</td>
                <td>前端的黄埔军校</td>
            </tr> -->
        </tbody>
    </table>

    <script>
        $(function() {
            var data = [{
                name: '传智播客',
                url: 'http://www.itcast.cn',
                type: 'IT最强培训机构'
            }, {
                name: '黑马程序员',
                url: 'http://www.itcast.com',
                type: '大学生IT培训机构'
            }, {
                name: '传智前端学院',
                url: 'http://web.itcast.cn',
                type: '前端的黄埔军校'
            }]
            $('button').click(function() {
                var list = []
                for (var i = 0; i < data.length; i++) {
                    list.push('<tr>')
                    for (var key in data[i]) {
                        list.push('<td>')
                        list.push(data[i][key])
                        list.push('</td>')
                    }
                    list.push('</tr>')
                }
                $('tbody').html(list.join(' '))
            })
        })
    </script>
</body>

</html>